<template>
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-container>
            <el-main>
                <el-input v-model="search" placeholder="请输入内容" style="width: 400px"></el-input>
                <el-button plain>搜索</el-button>
                <el-row :gutter="20">
                    <el-col class="grid-content" :span="10" v-for="c in communities" :key="c.id">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span><a @click="community(id)">{{c.communityTheme}}</a></span>
                            </div>
                            <div>描述: {{c.communtiyDescription}} | 访问量: {{c.communityVisits}} </div>
                            <p style="font-size: 5px">创建时间 :{{c.createTime | format}}</p>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <!-- <el-footer>
            <p class="total"> 总共{{total}}社区 </p>
        </el-footer> -->
    </el-container>
</template>

<script>
    import { formatTime } from "@/utils/time";
  export default {
    data() {
        return {
            search: '' ,
            total: 0 ,
            pageInfo: {
                pageSize: 10 ,
                currentPage: 1 ,
            } ,
            communities: [] ,
        }
    } ,
    methods: {
        getAuthors() {

        }
    } ,
    created() {
        this.$service({
            url: this.$service.adornUrl(`/community/forumCommunity/pageConditionCommunity/${this.pageInfo.currentPage}/${this.pageInfo.pageSize}`),
            method: 'post',
            data: {
                communityTheme: this.search
            }
        }).then((response) => {
            if (response && response.code === 200) {
                this.communities = response.rows
                this.total = response.total
            }
        })
    } ,
  };
</script>

<style scoped>
    .el-header {
        background-color: #b17bef;
        color: #333;
        line-height: 60px;
    }

    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .total {
        position: fixed;
        right: 0px;
        bottom: 0px;
    }

      .text {
    font-size: 10px;
  }

  .item {
    margin-bottom: 15px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>